<template>
  <div class="result-list">
    <div
      class="h-[24px] flex items-center text-[12px] text-[#898989] border-b-[1px] border-solid border-[#ddd]"
    >
      <div class="w-[50px] text-center">期号</div>
      <div class="flex-1 w-0 flex items-center">
        <template v-for="item in theader">
          <div class="w-[22px] mr-[4px] flex items-center justify-center">
            {{ item }}
          </div>
        </template>
      </div>
      <div class="w-[50px] flex items-center justify-center">开奖结果</div>
      <div class="w-[68px] flex items-center justify-center"></div>
    </div>
    <div class="grow-[1] h-[calc(100%_-_24px)] overflow-auto">
      <scroll-list
        v-model:loading="state.loading"
        :finished="state.finished"
        :length="state.list.length"
        :showFinished="false"
      >
        <template v-for="(item, index) in state.list">
          <div
            class="w-full h-[26px] py-[6px] flex items-center"
            :class="{
              'bg-[#eee]': index % 2 != 0
            }"
          >
            <div class="w-[50px] text-center text-[14px] text-[#666]">
              {{ item.BitchNo.substr(-5) }}
            </div>
            <div class="flex-1 w-0 flex items-center">
              <template v-for="i in getlotteryCode(item)">
                <div class="w-[22px] h-[22px] mr-[4px] flex items-center justify-center">
                  <ssc-ball type="small" :num="i" />
                </div>
              </template>
            </div>
            <div class="w-[64] flex items-center text-[12px] justify-between">
              <span class="text-blue text-center w-[14px]">{{ extendedRes(item).sum }}</span>
              <span
                class="ml-[4px] text-red"
                :class="{
                  'text-blue': extendedRes(item).dx == '小'
                }"
                >{{ extendedRes(item).dx }}</span
              >
              <span
                class="ml-[4px] text-red"
                :class="{
                  'text-blue': extendedRes(item).ds == '单'
                }"
                >{{ extendedRes(item).ds }}</span
              >
              <span
                class="ml-[4px] text-red"
                :class="{
                  'text-blue': extendedRes(item).lhh == '虎',
                  'text-green': extendedRes(item).lhh == '和'
                }"
                >{{ extendedRes(item).lhh }}</span
              >
            </div>
            <div class="w-[54px] flex items-center justify-center"></div>
          </div>
        </template>
      </scroll-list>
    </div>
    <div
      class="border-top py-[12px] flex justify-center items-center text-[14px] text-blue"
      v-if="state.list.length > 0"
      @click="$router.push(`/admin/openresult?gameId=${roomState.gameId}`)"
    >
      <span class="mr-[4px]">查看更多</span>
      <img class="w-[12px]" src="@/assets/images/history-more.png" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import $bus from "@/utils/bus";
import { sscSumLH } from "@/utils/game";
import { useResult } from "../hooks/use-result";
import { debounce } from "lodash-es";

const { roomState, sscBall, scrollList, state, getData, refresh, getlotteryCode } = useResult();
const theader = ["一", "二", "三", "四", "五"];

const extendedRes = (item: HistoryMo) => {
  return sscSumLH(getlotteryCode(item));
};

onMounted(() => {
  getData();
  // 监听开奖推送
  $bus.on(
    "open-result-complete",
    debounce(() => {
      refresh();
    }, 500)
  );
});
</script>
<style lang="scss" scoped>
.result-list {
  position: absolute;
  top: 88px;
  left: 0%;
  width: 100%;
  height: 254px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
